<template>
  <v-card class="h-full flex flex-column">
    <v-card-title
      class="align-start flex justify-space-between flex-nowrap p-5"
    >
      <div>
        <p class="text-[14px] text-[#736B7D] font-semibold">
          {{ t('message.dashboard.member.title') }}
        </p>
        <p class="text-no-wrap">
          <span class="text-[24px] font-semibold text-[#736B7D] me-1">
            {{ total }}
          </span>
          <small class="ml-6">
            <v-icon color="success" size="22">mdi-chevron-up</v-icon>
            <span class="text-[#56CA00] text-sm">{{ changePercent }}%</span>
          </small>
        </p>
      </div>
      <v-spacer></v-spacer>

      <v-btn icon small flat class="mt-n2 me-n3">
        <v-icon size="22" color="#736B7D">mdi-dots-vertical</v-icon>
      </v-btn>
    </v-card-title>

    <!-- Chart -->
    <v-card-text class="flex-1">
      <vue-apex-charts
        :options="chartOptions"
        :series="chartData"
      ></vue-apex-charts>
    </v-card-text>
  </v-card>
</template>

<script lang="ts" setup>
import VueApexCharts from 'vue3-apexcharts';
import { registerWeeklyChangeApi } from '@/api/dashboard';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
// import Dialog from "@/components/dialog/dialog";
import moment from 'moment';

const total = ref<number>(0);

console.log(
  'last 7 days:',
  moment().subtract(7, 'days').startOf('day').format('MM-DD')
);
let xaxisCategories: string[] = [];
xaxisCategories.push(
  moment().subtract(7, 'days').startOf('day').format('MM/DD')
);
xaxisCategories.push(
  moment().subtract(6, 'days').startOf('day').format('MM/DD')
);
xaxisCategories.push(
  moment().subtract(5, 'days').startOf('day').format('MM/DD')
);
xaxisCategories.push(
  moment().subtract(4, 'days').startOf('day').format('MM/DD')
);
xaxisCategories.push(
  moment().subtract(3, 'days').startOf('day').format('MM/DD')
);
xaxisCategories.push(
  moment().subtract(2, 'days').startOf('day').format('MM/DD')
);
xaxisCategories.push(
  moment().subtract(1, 'days').startOf('day').format('MM/DD')
);

const chartOptions = {
  grid: {
    show: false,
    padding: {
      // left: 0,
      // top: -100,
      // bottom: -10,
    },
  },
  chart: {
    type: 'line',
    toolbar: {
      show: false,
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: 'horizontal',
      shadeIntensity: 0,
      gradientToColors: undefined,
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 0.4,
      stops: [0, 100, 100],
    },
  },
  stroke: {
    width: 5,
    curve: 'smooth',
    lineCap: 'round',
  },
  colors: ['#56ca00'],
  legend: {
    show: false,
  },
  xaxis: {
    categories: xaxisCategories,
    labels: {
      // show: false,
      // rotate: 45
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  yaxis: {
    labels: {
      show: false,
    },
    // min: 100,
    // max: 600,
    tickAmount: 9,
  },
};

const chartData = reactive<any>([]);

const changePercent = ref<string>('');

const { t } = useI18n();

// if (walletStore.walletAddress === undefined) {
//     chartData.push({
//       title: 'Changes in the number of registrants in a week',
//       data: [0,0,0,0,0,0,0]
//     })
// } else {
//
// }
registerWeeklyChangeApi().then((res: any) => {
  console.log('registerWeeklyChangeApi res:', res);
  total.value = res.holders;
  const weeklyData = res.data.sort(function (a, b) {
    return a.createdAt - b.createdAt;
  });
  changePercent.value = (
    Number(
      (res.holders - weeklyData[weeklyData.length - 1].addressCount) /
        weeklyData[weeklyData.length - 1].addressCount
    ) * 100
  ).toFixed(0);
  const data = [];
  weeklyData.forEach((item: any) => {
    // @ts-ignore
    data.push(item.addressCount);
  });
  chartData.push({
    title: t('message.dashboard.member.changes'),
    data: data,
  });
  console.log('chartData:', chartData);
});
</script>
